<template>
  <div class="headers">
    <div class="search">
      <van-icon name="search" size="23" color="#fc605a" />
      <input class="inp" type="text" placeholder="m2k就是你的男神风" />
    </div>
    <div class="icons">
      <van-icon name="service-o" size="22" color="#fff" />&nbsp;&nbsp;
      <van-icon name="shopping-cart-o" size="27" color="#fff" />
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang='less'>
.headers {
  background-color: #fc605a;
  height: 55px;
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
  // float: left;

  .search {
    flex: 6;
    line-height: 56px;
    position: relative;
    .van-icon {
      position: absolute;
      left: 28px;
      top: 18px;
    }
    .inp {
      width: 90%;
      height: 30px;
      border: none;
      border-radius: 20px;
      margin-left: 15px;
      padding-left: 44px;
      box-sizing: border-box;
    }
  }
  .icons {
    margin: 15px 14px 0 0;
  }
  .icon {
    flex: 3;
  }
}
</style>
